import React, {useState,useEffect} from 'react';
import { Space, Table, Tag,Popconfirm,Card,Form,Input,Select,DatePicker } from 'antd';
import type { TableProps } from 'antd';
import moment from 'moment';
import request from "@/api/index";
import SearchForm from "@/view/userManager/user/SearchForm";
import EditForm from '@/view/userManager/user/EditForm'
import {ResponseType} from '@/api/indexType'
import './index.less'

const { Column } = Table;
const { RangePicker } = DatePicker;

interface DataType {
    key: string;
    id:string;
    username: string;
    phoneNum: number;
    email: string;
}


function User() {
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState<DataType[]>([]);
    const [rowData, setRowData] = useState({
        username:'',
        phoneNum:'',
        email:'',
        _id:"",
    });
    const [editModal, setEditModal] = useState(false);
    const [type, setType] = useState('add');
    const [modalTitle, setModalTitle] = useState('');
    const [pageInfo, setPageInfo] = useState({
        current:1,
        pageSize:10,
        total:0,
    });
    const [searchData, setSearchData] = useState({
        username: '',
        phoneNum: '',
        email: '',
        subscripte_type: '',
        startDate:'',
        endDate:'',
    });
    useEffect(() => {
        toQuery({
            ...searchData,
            page:pageInfo.current,
            pageSize:pageInfo.pageSize,
        })
    }, [searchData]);

    const onChange = (pagination, filters, sorter, extra) => {
        toQuery({
            ...searchData,
            page:pagination.current,
            pageSize:pagination.pageSize,
        })
    }
    const toSearch = (data) => {
        setSearchData(data)
    }
    const toQuery = (data) => {
        setLoading(true)
        request.get({
            url:"/subUser/list",
            data:data,
        }).then((res:ResponseType)=>{
            let {data, currentPage,pageSize,total} = res
            let list = data.map(item=>{
                return{
                    ...item,
                    "key":item._id,
                }
            })
            setData(list)
            setPageInfo({
                current:currentPage,
                pageSize:pageSize,
                total:total,
            })
        }).finally(()=>{
            setLoading(false)
        })
    }
    const toAddUser = (data)=>{
        setLoading(true)
        request.post({
            url:"/subUser/addUser",
            data:data,
        }).then((res:ResponseType)=>{
            toQuery({
                ...searchData,
                page:pageInfo.current,
                pageSize:pageInfo.pageSize,
            })
        }).finally(()=>{
            setLoading(false)
        })
    }
    const toEditUser = (data)=>{
        setLoading(true)
        request.post({
            url:"/subUser/upDateUser",
            data:{
                ...data,
                _id:rowData._id,
            },
        }).then((res:ResponseType)=>{
            toQuery({
                ...searchData,
                page:pageInfo.current,
                pageSize:pageInfo.pageSize,
            })
        }).finally(()=>{
            setLoading(false)
        })
    }

    const addUser = (data) => {
        setModalTitle('新增')
        setType('add')
        setRowData({
            username:'',
            phoneNum:'',
            email:'',
            _id:"",
        })
        setEditModal(true)
    }
    const edit = (record) => {
        setRowData(record)
        setModalTitle('编辑')
        setType('edit')
        setEditModal(true)
    }
    const modalOk = (data) => {
        if(type === 'add'){
            toAddUser(data)
        }else if(type === 'edit'){
            toEditUser(data)
        }
        setEditModal(false)
    }
    const modalCancel = () => {
        setEditModal(false)
    }
    const toRemove = (record) => {
        request.post({
            url:"/subUser/delUser",
            data:{
                _id:record._id,
            },
        }).then((res:ResponseType)=>{
            toQuery({
                ...searchData,
                page:pageInfo.current,
                pageSize:pageInfo.pageSize,
            })
        })
    }
    const delCancel = () => {
        console.log('delCancel-----')
    }
    return (
        <div>
            <Card className="mt16">
                <SearchForm
                    add={addUser}
                    toSearch={toSearch}
                />
            </Card>
            <Card className="mt16">
                <Table dataSource={data} onChange={onChange}  pagination={pageInfo} loading={ loading }>
                    <Column title="用户名" dataIndex="username" key="username" />
                    <Column title="手机号" dataIndex="phoneNum" key="phoneNum" />
                    <Column title="邮箱" dataIndex="email" key="email" />
                    <Column
                        title="创建时间"
                        dataIndex="createTime"
                        key="createTime"
                        render={(text, record) => (
                            <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
                        )}
                    />
                    <Column
                        title="更新时间"
                        dataIndex="updateTime"
                        key="updateTime"
                        render={(text, record) => (
                            text?<span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>:'_'
                        )}
                    />
                    <Column
                        title="操作"
                        key="operation"
                        render={(_, record) => (
                            <Space>
                                <span className="btn primaryColor" onClick={() => edit(record)}>编辑</span>
                                <Popconfirm
                                    title="确定要删除此条数据吗"
                                    description=""
                                    onConfirm={()=>toRemove(record)}
                                    onCancel={delCancel}
                                    okText="是"
                                    cancelText="否"
                                >
                                    <span className="btn dangerColor">删除</span>
                                </Popconfirm>
                            </Space>
                        )}
                    />
                </Table>
            </Card>
            <EditForm
                modalShow={editModal}
                title={modalTitle}
                modalOk={modalOk}
                modalCancel={modalCancel}
                data={rowData}
            />
        </div>
    );
}

export default User;
